<template>
  <div class="app-container">
    <div style="margin-bottom: 2px;">
      <el-card class="box-card" >
        <div slot="header" class="clearfix">
          <span>数据分析</span>
          <el-date-picker
            size="mini"
            style="float: right;"
            v-model="year_val"
            @change="handleBarDateGroup"
            value-format="timestamp"
            type="year"
            placeholder="选择年">
          </el-date-picker>
        </div>
        <div >
          <NewClientBarChart :data="show_bar_data"></NewClientBarChart>
        </div>
      </el-card>
    </div>
    <div style="margin: 10px;">
      <el-row :gutter="32" type="flex" justify="space-between">
        <el-col :xs="24" :sm="24" :lg="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>区域分析</span>
              <el-date-picker
                size="mini"
                style="float: right;"
                v-model="area_data_group"
                @change="handleAreaDateGroup"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="timestamp"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <NewClientAreaPieChart :data="show_area_data"></NewClientAreaPieChart>
          </el-card>
        </el-col>
      </el-row>
    </div>
     <div style="margin: 10px;">
      <el-row :gutter="32" type="flex" justify="space-between">
        <el-col :xs="24" :sm="24" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>顾问数据分析</span>
            <el-date-picker
              size="mini"
              style="float: right;"
              v-model="member_data_group"
              @change="handleMemDateGroup"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div v-for="(item, index) in members_count_data" :key="index">
            {{ index }} - {{ item.username }} - {{ item.count }}
          </div>
        </el-card>
        </el-col>
      </el-row> 
    </div>
  </div>
</template>

<script>
import NewClientBarChart from '@/components/Charts/newClient/newClientBarChart'
import NewClientAreaPieChart from '@/components/Charts/newClient/newClientAreaPieChart'
import moment from 'moment'
import Static_Data from '@/data/index'
import API from '@/utils/backend_api'

export default {
  name: 'newClientAnalysisPane',
  components: {
    NewClientAreaPieChart,
    NewClientBarChart
  },
  data() {
    return {
      show_bar_data: [],
      show_area_data: [],
      office_data: Static_Data.office,
      userOptions: this.$store.getters.usersList.map(item => ({ id: item.id, username: item.username + '(' + item.uid + ')' })),
      members_count_data: [],
      member_data_group: [moment(moment().startOf('month').format('YYYY-MM-DD') + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss').format('x'),
        moment(moment().endOf('month').format('YYYY-MM-DD') + ' 23:59:59', 'YYYY-MM-DD HH:mm:ss').format('x')],
      area_data_group: [moment(moment().startOf('month').format('YYYY-MM-DD') + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss').format('x'),
        moment(moment().endOf('month').format('YYYY-MM-DD') + ' 23:59:59', 'YYYY-MM-DD HH:mm:ss').format('x')],
      year_val: moment(moment().startOf('year').format('YYYY-MM-DD') + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss').format('x'),
      pickerOptions: Static_Data.pickerOptions
    }
  },
  created() {
    if (this.area_data_group && this.area_data_group.length === 2) {
      this.getAreaList(this.area_data_group[0], this.area_data_group[1])
    }
    if (this.member_data_group && this.member_data_group.length === 2) {
      this.getMemberList(this.member_data_group[0], this.member_data_group[1])
    }
    const year_moment = moment(Number(this.year_val))
    const end_str = year_moment.endOf('year').format('YYYY-MM-DD') + ' 23:59:59'
    const end = moment(end_str, 'YYYY-MM-DD HH:mm:ss')
    const start_str = year_moment.startOf('year').format('YYYY-MM-DD') + ' 00:00:00'
    const start = moment(start_str, 'YYYY-MM-DD HH:mm:ss')
    this.getBarList(start.format('x'), end.format('x'))
  },
  methods: {
    handleMemDateGroup(value) {
      console.log(value)
      if (value && value.length === 2) {
        this.getMemberList(value[0], value[1])
      }
    },
    handleAreaDateGroup(value) {
      if (value && value.length === 2) {
        this.getAreaList(value[0], value[1])
      }
    },
    handleBarDateGroup(value) {
      const year_moment = moment(Number(value))
      const end_str = year_moment.endOf('year').format('YYYY-MM-DD') + ' 23:59:59'
      const end = moment(end_str, 'YYYY-MM-DD HH:mm:ss')
      const start_str = year_moment.startOf('year').format('YYYY-MM-DD') + ' 00:00:00'
      const start = moment(start_str, 'YYYY-MM-DD HH:mm:ss')
      console.log('year-val123=', start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss'))
      this.getBarList(start.format('x'), end.format('x'))
    },
    getBarList(start_date, end_date) {
      API.report.new_client({ start_date: start_date, end_date: end_date }).then(response => {
        console.log('new_client data =', response.data)
        const temp_data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        if (response.data && response.data.length > 0) {
          response.data.map(item => {
            const index = moment(Number(item.create_date)).month()
            temp_data[index] = temp_data[index] + 1
          })

          console.log('temp_data =', temp_data)
          this.show_bar_data = temp_data
        } else {
          this.show_bar_data = temp_data
        }
      })
    },
    getMemberList(start_date, end_date) {
      API.report.new_client({ start_date: start_date, end_date: end_date }).then(response => {
        console.log('new_client data =', response.data)
        const temp_data = this.userOptions.map(item => {
          item.count = 0
          return item
        })
        if (response.data && response.data.length > 0) {
          response.data.map(item => {
            const index = temp_data.findIndex(temp_item => {
              if (temp_item.id && temp_item.id === item.consultant_id) {
                return true
              }
              return false
            })
            if (index >= 0 && index < temp_data.length) {
              temp_data[index].count = temp_data[index].count + 1
            }
          })
          this.members_count_data = temp_data.sort(
            (a, b) => b.count - a.count
          )
        } else {
          this.members_count_data = temp_data
        }
      })
    },
    getAreaList(start_date, end_date) {
      API.report.new_client({ start_date: start_date, end_date: end_date }).then(response => {
        console.log('new_client data =', response.data)
        let temp_data = this.office_data.map(item => {
          return { id: item.key, name: item.display_name, value: 0 }
        })
        if (response.data && response.data.length > 0) {
          response.data.map(item => {
            temp_data = temp_data.map(temp_item => {
              if (item.consultant && temp_item.id === item.consultant.office) {
                temp_item.value = temp_item.value + 1
              }
              return temp_item
            })
          })
        }
        console.log(this.show_area_data)
        this.show_area_data = temp_data
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
}
</style>
